<template>
  <div class="module">
    <div class="module-title">
      信用风险
      <div class="btn-right">
        <a class="jump" @click="jumpPage">管理</a>
        <a class="jump" @click="jumpDialog">创建</a>
        <span>|</span>
        <a>更多</a>
      </div>
    </div>
    <div class="module-body">
      <el-tabs v-model="activeName" class="info-tabs">
        <el-tab-pane name="授信">
          <template v-slot:label>
            <div class="two-line">
              <div class="line">
                <div class="title">授信余额</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.creditBalFull)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit">万元</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.creditBalFullLastmonComp)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit-sm">万元</span>
                  <span :class="getRateICon(data.creditBalFullLastmonComp)" />
                </div>
              </div>
              <div class="line">
                <div class="title">存款金额</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.balance)"
                    :duration="1500"
                    :decimals="2"
                  />
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.balanceBalInLastmonComp)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit-sm">万元</span>
                  <span :class="getRateICon(data.balanceBalInLastmonComp)" />
                </div>
              </div>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane name="授信集中度">
          <template v-slot:label>
            <div class="two-line">
              <div class="line">
                <div class="title">授信集中度</div>
                <div class="number">
                  <span class="text">Top10</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.top10CustCreditConcentr)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit">%</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.top10CustCreditConcentrLastmonComp)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit-sm">%</span>
                  <span :class="getRateICon(data.top10CustCreditConcentrLastmonComp)" />
                </div>
              </div>
              <div class="line">
                <div class="title" />
                <div class="number">
                  <span class="text">10亿以上</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.overbillionCustCreditConcentr)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit">%</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.overbillionCustCreditConcentrLastmonComp)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit-sm">%</span>
                  <span :class="getRateICon(data.overbillionCustCreditConcentrLastmonComp)" />
                </div>
              </div>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane name="不良">
          <template v-slot:label>
            <div class="two-line">
              <div class="line">
                <div class="title">不良余额</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.badBalIn)"
                    :duration="1500"
                    :decimals="2"
                  />
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.badBalInLastmonComp)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit-sm">万元</span>
                  <span :class="getRateICon(data.badBalInLastmonComp)" />
                </div>
              </div>
              <div class="line">
                <div class="title">不良率</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.badRatio)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit">%</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.badRatioLastmonComp)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit-sm">%</span>
                  <span :class="getRateICon(data.badRatioLastmonComp)" />
                </div>
              </div>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane name="关注">
          <template v-slot:label>
            <div class="two-line">
              <div class="line">
                <div class="title">关注余额</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.concernAmt)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit">万元</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.concernAmtLastmonComp)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit-sm">万元</span>
                  <span :class="getRateICon(data.concernAmtLastmonComp)" />
                </div>
              </div>
              <div class="line">
                <div class="title">关注率</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.concernRatio)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit">%</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.concernRatioLastmonComp)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit-sm">%</span>
                  <span :class="getRateICon(data.concernRatioLastmonComp)" />
                </div>
              </div>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane name="逾期">
          <template v-slot:label>
            <div class="two-line">
              <div class="line">
                <div class="title">逾期客户数</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.overdueCustCnt)"
                    :duration="1500"
                    :decimals="0"
                  />
                  <span class="unit">个</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.overdueCustCntLastmonComp)"
                    :duration="1500"
                    :decimals="0"
                  />
                  <span class="unit-sm">个</span>
                  <span :class="getRateICon(data.overdueCustCntLastmonComp)" />
                </div>
              </div>
              <div class="line">
                <div class="title">逾期客户金额</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.overdueAmt)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit">万元</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.overdueAmtLastmonComp)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit-sm">万元</span>
                  <span :class="getRateICon(data.overdueAmtLastmonComp)" />
                </div>
              </div>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane name="非不良逾期">
          <template v-slot:label>
            <div class="two-line">
              <div class="line">
                <div class="title">非不良逾期客户数</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.nobadOverdueCustCnt)"
                    :duration="1500"
                    :decimals="0"
                  />
                  <span class="unit">个</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.nobadOverdueCustCntLastmonComp)"
                    :duration="1500"
                    :decimals="0"
                  />
                  <span class="unit-sm">个</span>
                  <span :class="getRateICon(data.nobadOverdueCustCntLastmonComp)" />
                </div>
              </div>
              <div class="line">
                <div class="title">非不良逾期客户金额</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.nobadOverdueAmt)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit">万元</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.nobadOverdueAmtLastmonComp)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit-sm">万元</span>
                  <span :class="getRateICon(data.nobadOverdueAmtLastmonComp)" />
                </div>
              </div>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane name="下月逾期预测">
          <template v-slot:label>
            <div class="two-line">
              <div class="line">
                <div class="title">季度不良预测客户数</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.nextMonOverdueCustCnt)"
                    :duration="1500"
                    :decimals="0"
                  />
                  <span class="unit">个</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.nextMonOverdueCustCntLastmon)"
                    :duration="1500"
                    :decimals="0"
                  />
                  <span class="unit-sm">个</span>
                  <span :class="getRateICon(data.nextMonOverdueCustCntLastmon)" />
                </div>
              </div>
              <div class="line">
                <div class="title">季度不良预测授信金额</div>
                <div class="number">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.nextMonOverdueAmt)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit">万元</span>
                </div>
                <div class="compare">
                  <span class="last-month">较上月</span>
                  <div
                    :start-val="0"
                    :end-val="Math.abs(data.nextMonOverdueAmtLastmonComp)"
                    :duration="1500"
                    :decimals="2"
                  />
                  <span class="unit-sm">万元</span>
                  <span :class="getRateICon(data.nextMonOverdueAmtLastmonComp)" />
                </div>
              </div>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <Dialog ref="dialog" />
  </div>
</template>

<script>
import { ref, reactive } from '@vue/composition-api'
import Dialog from './dialog.vue'
export default {
  components: { Dialog },
  setup(props, { refs }) {
    const data = reactive({
      creditBalFull: 6056.12,
      creditBalFullLastmonComp: 218.12,
      balance: 3560.12,
      balanceBalInLastmonComp: 218.12,
      top10CustCreditConcentr: 10.12,
      top10CustCreditConcentrLastmonComp: 2.12,
      overbillionCustCreditConcentr: 10.12,
      overbillionCustCreditConcentrLastmonComp: 2.12,
      badBalIn: 10.12,
      badBalInLastmonComp: 2.12,
      badRatio: 10.12,
      badRatioLastmonComp: 2.12,
      concernAmt: 2360.46,
      concernAmtLastmonComp: -218.12,
      concernRatio: 10.12,
      concernRatioLastmonComp: 2.12,
      overdueCustCnt: 2360,
      overdueCustCntLastmonComp: 2360.46,
      overdueAmt: 2360.46,
      overdueAmtLastmonComp: 2360.46,
      nobadOverdueCustCnt: 2360.46,
      nobadOverdueCustCntLastmonComp: 2360.46,
      nobadOverdueAmt: 2360.46,
      nobadOverdueAmtLastmonComp: 2360.46,
      nextMonOverdueCustCnt: 2360.46,
      nextMonOverdueCustCntLastmon: 2360.46,
      nextMonOverdueAmt: 2360.46,
      nextMonOverdueAmtLastmonComp: 2360.46
    })
    const getRateICon = (num) => {
      return num > 0 ? 'rate_up' : num < 0 ? 'rate_down' : ''
    }

    const jumpDialog = () => {
      refs.dialog.init()
    }
    const jumpPage = () => {}
    return {
      activeName: ref('授信'),
      data,
      getRateICon,
      jumpDialog,
      jumpPage
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/variables';
.btn-right {
  margin-left: auto;
  font-size: 12px;
  .jump {
    margin-left: 10px;
  }
  span {
    display: inline-block;
    margin: 0 10px;
    font-size: 10px;
    color: #ddd;
  }
}
.rate_up {
  top: 1px;
  left: 5px;
}
.rate_down {
  top: 6px;
  left: 5px;
}
.module-body {
  ::v-deep .el-tabs__nav-wrap {
    margin: 0;
    padding: 12px 0;
    overflow: inherit;
    &::before {
      content: '';
      position: absolute;
      left: -25px;
      top: 0;
      width: calc(100% + 50px);
      height: 1px;
      background-color: #d5d5d5;
      z-index: 1;
    }
    &::after {
      left: -25px;
      width: calc(100% + 50px);
      height: 1px;
      background-color: #d5d5d5;
    }
  }
  ::v-deep [role='tab'] {
    position: relative;
    height: 80px;
    padding: 0 30px;
    &:hover {
      cursor: default;
    }
    &::after {
      content: '';
      position: absolute;
      right: -2px;
      top: 42px;
      width: 1px;
      height: 40px;
      background: #c7c7c7;
    }
  }

  ::v-deep .el-tabs__active-bar {
    height: 0;
  }

  ::v-deep .el-tabs__nav {
    margin-bottom: 10px;
  }

  .title {
    font-size: 14px;
    color: #333;
  }

  .number {
    height: 35px;
    font-size: 26px;
    font-weight: bold;
    color: $themeColor;
    .text {
      font-size: 12px;
      font-weight: normal;
      margin-right: 5px;
      color: #333;
    }
    .unit {
      display: inline-block;
      height: 22px;
      font-size: 12px;
      font-weight: 400;
      color: #666;
      line-height: 22px;
    }
  }

  .compare {
    justify-content: left;
    margin-top: 0px;
    font-size: 12px;
    color: #5c5c5c;
    .last-month {
      margin-right: 5px;
      color: #999;
    }
  }

  .two-line .line {
    display: inline-block;
  }

  .two-line .line + .line {
    padding-left: 25px;
  }
}
</style>
